<template>
    <div class="content">
        <div class="refund">
            <h3>退费原因：</h3>
            <van-field
            v-model="remarks"
            rows="5"
            type="textarea"
            maxlength="100"
            placeholder="请输入您的退费原因"
            input-align="center"
            />
        </div>
        <div class="tips">
            <p>温馨提示：</p>
            <p>由于目前暂不支持自动退费，您的退费申请提交后，工作人员会进行审核，审核时间在1-3个工作日，
                请您耐心等待。退费申请通过后，退费金额将退还至您的付款账户。
            </p>
        </div>
        <div class="btn">
            <van-button :loading='loading' @click="createOrderRefund" color="#27b5a7">提交申请</van-button>
            <van-button :loading='loading' to="/" color="#27b5a7">返回首页</van-button>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            remarks:null,
            loading:false,
            order:[]
        }
    },
    created(){
        if (!this.$route.params.order) {
            this.$router.go(-1)
        } else {
            this.order = this.$route.params.order
            console.log(this.$route.params.order)
        }
    },
    methods:{
        //提交申请
        async createOrderRefund(){
            if (!this.remarks) {
                this.$toast('原因不能为空')
            } else {
                this.loading = true
                let res = await this.$api.createOrderRefund({
                    orderId:this.order.id,
                    reason:this.remarks
                })
                if (res) {
                    console.log('res----------',res)
                    if (res.status == 200) {
                        this.$toast(res.message)
                        this.order.username = this.username
                        setTimeout(()=>{
                            this.loading = false
                            this.$router.push('/order')
                        },1000)
                    }else{
                        this.$toast('提交失败')
                        this.loading = false
                        
                    }
                }else{
                    this.loading = false
                }
                
            }
        }
    },
    filters:{
        dateStyle(v){
            let date = new Date(v)
            let Y = date.getFullYear()
            let M = date.getMonth()+1
            let D = date.getDate()
            let h = date.getHours()
            let m = date.getMinutes()
            let s = date.getMilliseconds()
            if (M<10) {
                M = '0'+M
            }
            if (D<10) {
                D = '0'+D
            }
            if (h<10) {
                h = '0'+h
            }
            if (m<10) {
                m = '0'+m
            }
            if (s<10) {
                s = '0'+s
            }
            let value =`${Y}-${M}-${D} ${h}:${m}:${s}`
            return value
        }
    },
}
</script>
<style lang="less">
    .content{
        .refund{
            width: 96%;
            margin: 0.2rem auto;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
            box-sizing: border-box;
            padding: 0.3rem ;
            h3{
                font-size: .5rem;
                line-height: 0.8rem;
                border-bottom: 1px solid #efefef;
            }
        }
        .tips{
            width: 96%;
            margin: 0.3rem auto 1rem auto;
            p{
                font-size: 0.4rem;
                color: red;
                line-height: 0.6rem;
            }
        }
        .btn{
            width: 96%;
            margin: 0.4rem auto;
            display: flex;
            justify-content: space-between;
            button{
                width: 48%;
                height: 1.4rem;
                line-height: 1.4rem;
            }
        }
    }
</style>